import React, {Component} from 'react'
import {StyleSheet, Text, View, TouchableOpacity} from 'react-native'
import MinaIcon from '../../../components/MinaIcon.js'

export default class HomeNavComponent extends Component {
  homeNavHandle(){

  }
  homeNav(){
    let homeNavs = [
      {
        name: '课程安排',
        icon: 'menu_icon_course'
      },
      {
        name: '课程作业',
        icon: 'menu_icon_work'
      },
      {
        name: '每日签到',
        icon: 'menu_icon_pen'
      },
      {
        name: '通知公告',
        icon: 'menu_icon_notice'
      }
    ];
    let homeNav = <View style={styles.homeNavContainer}>
      {homeNavs.map((item, index) => {
        return (
          <TouchableOpacity key={index} onPress={() => {
              this.homeNavHandle();
            }}>
            <View style={styles.homeNavItem}>
              <MinaIcon
                name={'MinaIcon|' + item.icon}
                size={50}
                style={styles.homeNavIcon}
              />
              <Text style={styles.homeNavName}>{item.name}</Text>
            </View>
          </TouchableOpacity>
        )
      })}
    </View>
    return homeNav;
  }
  render() {
    return (
      this.homeNav()
    )
  }
}

const styles = StyleSheet.create({
  homeNavContainer: {
    flexDirection: 'row', 
    alignItems: 'center',
    justifyContent: 'space-between',
    marginTop: 30,
  },
  homeNavItem: {
    textAlign: 'center',
  },
  homeNavIcon: {
    color: '#1C2F66',
    width: 50,
    height: 50,
    borderRadius: 50,
  },
  homeNavName: {
    color: '#666',
    marginTop: 8,
    textAlign: 'center',
  },
})